<template>
  <div class="loading">
    <!--  -->
    <div v-if="!isReachBottom"><i class="iconfont icon-loading"></i><span>加载中...</span></div>
    <div v-else><span>加载完毕</span></div>
  </div>
</template>

<script>
export default {
  props: ['isReachBottom']
}
</script>

<style lang="less" scoped>
.loading {
  text-align: center;
  div {
    display: flex;
    justify-content: center;
  }
  i {
    margin-right: 10px;
    animation: zhuang 1.5s linear infinite;
  }
  @keyframes zhuang {
    0% {
      transform: rotate(0deg);
    }
    20% {
      transform: rotate(72deg);
    }
    40% {
      transform: rotate(144deg);
    }
    60% {
      transform: rotate(216deg);
    }
    80% {
      transform: rotate(288deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
